import { isEmpty, sortBy, mixin, flatMap, compact } from "lodash";
import Sortable from "sortablejs";
import Vue from 'vue'
export default {
    /**
     * 初始化
     *
     * @param {*} table
     * @param {*} xTable
     * @param {*} localData
     * @param {*} xToolbar
     */
    init(table: any, xTable: any, localData: any, xToolbar: any) {
        // console.log('proxy.init');
        const me = this as any;
        // 将相关对象绑定到自定义列表头对象
        table.xTable = xTable;
        table.localData = localData;
        table.xToolbar = xToolbar;
        xTable.connect(xToolbar);
        mixin(table, me);
        // 监听列表头拖动
        table.listenColumnDrop();
    },
    /**
     * 监听列拖动
     *
     */
    listenColumnDrop() {
        const me = this as any,
            xTable = me.xTable;
        me.sortable =
            Sortable.create(
                // 监听列表头
                xTable.$el.querySelector(
                    ".body--wrapper>.vxe-table--header .vxe-header--row"
                ),
                {
                    // 过滤掉勾选列，序号列，浮动列
                    // 如有修改需同步修改@/assets/sass/all.scss下vxe-table中对应css
                    filter: '.col--checkbox,.col--seq,.col--seq,.col--fixed',
                    handle: ".vxe-header--column",
                    store: {
                        get: function(sortable: any) {
                            // 初始化时获取默认排序
                            me.sortableTemp = sortable.toArray();
                            // console.log('get', me.sortableTemp)
                            return me.sortableTemp;
                        },
                        set: function() {

                        }
                    },
                    onEnd: ({ newIndex, oldIndex }: any) => {
                        const {
                            fullColumn,
                            tableColumn
                        } = xTable.getTableColumn(),
                            newColumn = fullColumn[newIndex]
                        // 如果交互对象没有标题、浮动列、序号列则还原配置
                        if (!newColumn.title || newColumn.fixed || newColumn.type == "seq") {
                            // console.log('stop', me.sortableTemp)
                            me.sortable.sort(me.sortableTemp);
                            return;
                        }
                        // 获取列的旧序号
                        const oldColumnIndex = xTable.getColumnIndex(
                            tableColumn[oldIndex]
                        );
                        // 获取列的新序号
                        const newColumnIndex = xTable.getColumnIndex(
                            tableColumn[newIndex]
                        );
                        // 移动到目标列
                        const currRow = fullColumn.splice(oldColumnIndex, 1)[0];
                        fullColumn.splice(newColumnIndex, 0, currRow);
                        // 重新设置列
                        xTable.loadColumn(fullColumn);
                        // 根据列的title配置获取排序
                        const localData = me.localData,
                            data = flatMap(fullColumn, function(item: any) {
                                return item.title;
                            })
                        // 按标题保存排序
                        localData.saveDataByDebounce('sortColumn', compact(data));
                        // 更新列排序配置
                        me.updateSortableTemp();
                    }
                }
            );
    },
    /**
      *显示自定义列配置项
      *
      */
    showCustom() {
        (this as any).xToolbar.customOpenEvent();
    },
    /**
     * 自定义列配置发生变化时
     *
     * @memberof mixinGridColumn
     */
    customChange() {
        const me = this as any,
            xTable = me.xTable,
            // 遍历列配置
            data = flatMap(xTable.getTableColumn().fullColumn, function(item: any) {
                // 获取隐藏列的field
                return !item.visible ? item.property : '';
            })
        // 保存配置
        me.localData.saveDataByDebounce('hiddenField', compact(data));
        // 更新列排序配置
        me.updateSortableTemp();
    },
    /**
     * 更新列排序配置
     *
     */
    updateSortableTemp() {
        const me = this as any;
        Vue.nextTick(() => {
            me.sortableTemp = me.sortable.toArray();
            // console.log(me.sortableTemp)
        })
    },
    /**
     * 设置默认配置
     *
     * @param {*} { hiddenField, sortColumn }
     */
    loadConfig({ hiddenField, sortColumn }: any) {
        const me = this as any;
        // 列排序
        me.sortableByTitle(sortColumn);
        // 隐藏字段
        me.hiddenByField(hiddenField);
        // 更新列排序配置
        me.updateSortableTemp();
    },
    /**
     * 列表根据title配置排序
     *
     * @param {*} data  如:['序号','姓名']
     * @memberof mixinGridColumn
     */
    sortableByTitle(data: any) {
        const me = this as any,
            xTable = me.xTable;
        if (!isEmpty(data) && xTable) {
            // 获取当前表格列配置
            let {
                fullColumn
            } = xTable.getTableColumn();
            // 遍历排序数组
            fullColumn.forEach((item: any) => {
                // 根据标题找到对应的列
                const index = data.indexOf(item.title);
                // 设置列的排序值
                item.sortableIndex = index;
            });
            // 根据排序值重新排序
            fullColumn = sortBy(fullColumn, 'sortableIndex');
            // 重载列配置实现重新排序
            xTable.loadColumn(fullColumn);
        }
    },
    /**
    * 列表根据field配置隐藏指定列
     *
     * @param {*} data 如：['name','age']
     * @memberof mixinGridColumn
    */
    hiddenByField(data: any) {
        const me = this as any,
            xTable = me.xTable;
        if (!isEmpty(data) && xTable) {
            // 获取当前表格列配置
            data.forEach((item: any) => {
                // 根据field配置找到对应列并隐藏
                const column = xTable.getColumnByField(item);
                if (column) {
                    xTable.hideColumn(column);
                }
            });
        }
    }
}